﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用JavaScript的push和jQuery的animate等方法设计横向选项卡与图文滚动特效</title>
<style type="text/css">
/* 全局样式 */
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, form, select, fieldset, table, img, td, div, input { margin: 0; padding: 0; font-size: 12px; font-weight: normal; }
body>div, form>div { margin: 0 auto; }
div { text-align: left; }
a img { border: 0; }
body { color: #666666; text-align: center; font: 12px Arial, "宋体"; }
ul, ol, li { list-style-type: none; }
a { outline-style: none; color: #666666; text-decoration: none; }
a:hover { color: #0b488c; }
a, area { blr:expression(this.onFocus=this.blur())
}
:focus { -moz-outline-style: none; }
.clear { clear: both; }
.hidden { display: none; }
.block { display: block; }
.left { float: left; }
.right { float: right; }
.m2yw_right {
	width: 679px;
	margin: 20px auto;
}
.m2yw_tab {
	background: url(images/m2line.jpg) repeat-x scroll left bottom transparent;
	height: 28px;
}
.m2yw_tab ul li {
	background: url(images/m2_hover2.jpg) no-repeat scroll 0 0 transparent;
	cursor: pointer;
	float: left;
	height: 28px;
	line-height: 28px;
	margin-right: 5px;
	text-align: center;
	width: 85px;
}
.m2yw_tab ul .m2yw_cutli {
	background: url(images/m2_hover1.jpg) no-repeat scroll 0 0 transparent;
	color: #05589c;
	font-weight: bold;
}
.m2yw_pic {
	border-bottom: 1px solid #dedcdd;
	border-left: 1px solid #dedcdd;
	border-right: 1px solid #dedcdd;
	height: 157px;
	padding-top: 30px;
}
.m2yw_btnl {
	cursor: pointer;
	float: left;
	height: 114px;
	margin: 0 15px;
	padding-top: 3px;
	width: 16px;
}
.m2yw_piclist {
	float: left;
	height: 150px;
	overflow: hidden;
	position: relative;
	width: 579px;
}
.m2yw_btnr {
	cursor: pointer;
	float: left;
	padding-top: 3px;
}
.m2yw_posul {
	left: 0;
	position: absolute;
	top: 0;
}
.m2yw_piclist ul li {
	background: url(images/m2libg.jpg) no-repeat scroll center top transparent;
	float: left;
	height: 150px;
	margin-right: 18px;
	padding: 1px 1px 0;
	text-align: center;
	width: 173px;
}
.m2yw_piclist ul li img {
	display: block;
	margin-bottom: 8px;
	background: #f93;
	height: 116px;
	width: 173px;
	line-height: 116px;
	color: #fff;
}
</style>
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript">  
function upMove(obj){	
    $(obj).next().find("ul").width($(obj).next().find("ul li").size()*193);
	var dom = $(obj).next();	
	dom.animate({scrollLeft:193+dom.scrollLeft()},500) ;
}
function downMove(obj){
	$(obj).prev().find("ul").width($(obj).prev().find("ul li").size()*193);
	var dom = $(obj).prev();	
	dom.animate({scrollLeft:-193+dom.scrollLeft()},500) ; 
}
function changeTab(m,n){
    var menu=document.getElementById("tab"+m).getElementsByTagName("li");  
    var div=document.getElementById("tablist"+m).getElementsByTagName("div");
    var showdiv=[];
    for (i=0; j=div[i]; i++){		
      if ((" "+div[i].className+" ").indexOf(" m2yw_pic ")!=-1){
       showdiv.push(div[i]);
      }
    }
    for(i=0;i<menu.length;i++)
    {
	  menu[i].className=i==(n-1)?"m2yw_cutli":"";
	  showdiv[i].style.display=i==(n-1)?"block":"none";  
    }
}
</script>
</head>

<body >

<div>
<div class="m2yw_right">
  <div class="m2yw_tab">
    <ul id="tab2">
      <li class="m2yw_cutli" onMouseMove="changeTab(2,1)">网页模板</li>
      <li onMouseMove="changeTab(2,2)">平面设计</li>
      <li onMouseMove="changeTab(2,3)">网页特效</li>
      <li onMouseMove="changeTab(2,4)">酷站欣赏</li>
      <li onMouseMove="changeTab(2,5)">动画酷站</li>
      <li onMouseMove="changeTab(2,6)">网页模板</li>
      <li onMouseMove="changeTab(2,7)">酷站欣赏</li>
    </ul>
  </div>
  <div id="tablist2">
    <div class="m2yw_pic">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/intke_sml1337184692112482652.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格一</a></li>
          <li><img width="173" height="116" src="images/intsml1337184546.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格二</a></li>
          <li><img width="173" height="116" src="images/intsml1337177137.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格三</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337184692581665964.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格四</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337184692655242742.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格五</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
    <div class="m2yw_pic hidden">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/intsml1337216189.jpg" alt="科e互联-平面设计" /> <a href="http://www.internetke.com/m2_web_itm_22.html" target="_blank">平面设计一</a></li>
          <li><img width="173" height="116" src="images/intsml1337216824.jpg" alt="科e互联-平面设计" /> <a href="http://www.internetke.com/m2_web_itm_22.html" target="_blank">平面设计二</a></li>
          <li><img width="173" height="116" src="images/intke_sml13379332231236460235.jpg" alt="科e互联-平面设计" /> <a href="http://www.internetke.com/m2_web_itm_22.html" target="_blank">平面设计三</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337330436449361266.jpg" alt="科e互联-平面设计" /> <a href="http://www.internetke.com/m2_web_itm_22.html" target="_blank">平面设计四</a></li>
          <li><img width="173" height="116" src="images/intke_sml13372683711028074882.jpg" alt="科e互联-平面设计" /> <a href="http://www.internetke.com/m2_web_itm_22.html" target="_blank">平面设计五</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
    <div class="m2yw_pic hidden">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/internetke_1340258852.jpg" alt="科e互联-网页特效" /> <a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">网页特效一</a></li>
          <li><img width="173" height="116" src="images/internetke_1339470328.jpg" alt="科e互联-网页特效" /> <a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">网页特效二</a></li>
          <li><img width="173" height="116" src="images/internetke_1339263480.jpg" alt="科e互联-网页特效" /> <a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">网页特效三</a></li>
          <li><img width="173" height="116" src="images/internetke_1339258051.jpg" alt="科e互联-网页特效" /> <a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">网页特效四</a></li>
          <li><img width="173" height="116" src="images/internetke_1338735869.jpg" alt="科e互联-网页特效" /> <a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">网页特效五</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
    <div class="m2yw_pic hidden">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/intke_sml1337421450646127874.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站一</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337451051128038502.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站二</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337451277747011597.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站三</a></li>
          <li><img width="173" height="116" src="images/intke_sml13374515852094149483.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站四</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
    <div class="m2yw_pic hidden">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/intsml1337400225.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_42.html" target="_blank">动画酷站一</a></li>
          <li><img width="173" height="116" src="images/intsml1337451857.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_42.html" target="_blank">动画酷站二</a></li>
          <li><img width="173" height="116" src="images/intke_sml13374033822137232543.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_42.html" target="_blank">动画酷站三</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
    <div class="m2yw_pic hidden">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/intke_sml1337184692112482652.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格一</a></li>
          <li><img width="173" height="116" src="images/intsml1337184546.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格二</a></li>
          <li><img width="173" height="116" src="images/intsml1337177137.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格三</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337184692581665964.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格四</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337184692655242742.jpg" alt="科e互联-网站模板" /> <a href="http://www.internetke.com/m6_web_showImg_1.html" target="_blank">网站模板风格五</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
    <div class="m2yw_pic hidden">
      <div onClick="upMove(this);return false" class="m2yw_btnl"><img width="16" height="114" src="images/m2btn3.jpg" /></div>
      <div class="m2yw_piclist">
        <ul class="m2yw_posul">
          <li><img width="173" height="116" src="images/intke_sml1337421450646127874.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站一</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337451051128038502.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站二</a></li>
          <li><img width="173" height="116" src="images/intke_sml1337451277747011597.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站三</a></li>
          <li><img width="173" height="116" src="images/intke_sml13374515852094149483.jpg" alt="科e互联-酷站欣赏" /> <a href="http://www.internetke.com/m6_animo_list_117.html" target="_blank">酷站四</a></li>
        </ul>
      </div>
      <div onClick="downMove(this);return false" class="m2yw_btnr"><img width="16" height="114" src="images/m2btn4.jpg" /></div>
    </div>
  </div>
</div>
</div>

</body>
</html>
